<template>
  <div class="login">
    <div class="goback" @click="goBack">
      <i><img src="@/assets/images/icons/fanhui.png"></i>
    </div>
    <h1>Beats账号登录</h1>
    <h2><img src="@/assets/images/Beatslogo.png"></h2>
    <div v-if="isShow" class="msg">
      <div class="login-tel">
        <input type="text" v-model="userName"></input>
      </div>
      <div class="login-tel">
        <input type="text" v-model="userPwd" @keyup.enter="loginBtn"></input>
      </div>
      <div class="login-next" @click="loginBtn" >登录</div>
      <div style="text-align: center">
        <span @click="userLogin">手机号登录 </span>|<span> 立即注册</span>
      </div>
    </div>
    <div v-else class="msg">
      <div class="login-tel">
        <input type="text" pattern="[0-9]{11}" v-model="userTel" @keyup.enter="goNext"></input>
      </div>
      <div class="login-next" @click="goNext">下一步</div>
      <div style="text-align: center">
        <span @click="userLogin">用户名密码登录 </span>|<span> 立即注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
import { Toast } from 'mint-ui';
import {api1} from "@/common/api/request"
export default {
  name: "Login",
  data(){
    return{
      isShow: true,
      userName:'',  //用户名
      userPwd:'',   //密码
      userTel:'',   //手机号码
      rules:{
        userName:{
          rule:/\S/,
          msg:'用户名|手机号不能为空'
        },
        userPwd:{
          rule:/^\w{6,11}$/,
          msg:'密码不能为空。并且要求6-11位'
        },
        userTel:{
          rule:/^1[123456789]\d{9}$/,
          msg:'填写11位手机号'
        }
      }
    }
  },
  methods:{
    ...mapMutations(['login']),
    userLogin(){
      this.isShow = !this.isShow
    },
    goBack(){ //返回
      this.$router.push('/profile')
    },
    //点击登录
    loginBtn(){
      //前端的前置验证
      if(!this.validate('userName')) return
      if(!this.validate('userPwd')) return

      api1({
        url: '/api/login',
        method:'POST',
        data:{
          userName: this.userName,
          userPwd: this.userPwd
        }
      }).then(res => {
        if(res.success){ //登录成功
          Toast(res.msg)
        }else{  //登录失败
          Toast(res.msg)
        }
        //存储信息
        this.login(res.data)
        //跳转页面
        this.$router.push('/profile')
      })
    },
    //验证提示信息
    validate(key){
      let bool = true
      if(!this.rules[key].rule.test(this[key])){
        Toast(this.rules[key].msg)
        bool = false
        return false
      }
      return bool
    },
    //手机号登录 下一步
    goNext(){
      //前端验证码手机号
      if(!this.validate('userTel')) return
      this.$router.push({
        path:'/loginCode',
        query:{
          tel: this.userTel
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  h1{
    margin-top: 80px;
    text-align: center;
  }
  h2{
    margin-top: 40px;
    text-align: center;
  }
  .msg{
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .goback{
    img{
      width: 24px;
      height: 24px;
    }
  }
}
.login-tel{
  input{
    width: 200px;
    margin: 5px 0;
    padding: 6px 0px;
    border: 1px solid blue;
    border-radius: 12px;
  }
}
.login-next{
  width: 200px;
  margin: 10px 0;
  padding: 3px 0px;
  text-align: center;
  background-color: #00B7FF;
  border-radius: 12px;
}
</style>